<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:profile="http://www.contact.core.profile.com/contacts/core/profile/ui"
      xmlns:atria="http://www.atria.cz/common/jsf"
        >

<ui:component>
    <style type="text/css">
        table.noborder td {
            border: 0px;
        }
    </style>
    <h:form>
        <rich:panel id="requestRichPanel"
                    style="overflow:auto;text-align:left;width:100%; border:none"
                    bodyClass="rich-laguna-panel-no-header">
            <a4j:outputPanel layout="block" style="width:100%" id="albumPanelView">
                <a4j:outputPanel layout="block" style="height:70px; width:100%">

                    <core:pictureForView style="width:30%"
                                         pictureKey="photoprofile_#{profileSessionBean.information.id}"
                                         informationId="#{profileSessionBean.information.id}"/>

                    <h:outputLabel
                            value="#{profileSessionBean.information.firstName} #{profileSessionBean.information.lastName}"/>

                </a4j:outputPanel>
                <a4j:outputPanel id="editPanelCurrentlyView" style="width:100%">
                    <a4j:outputPanel rendered="#{photosBean.someAllbumEdditing}" layout="block" style="widht:100%;">

                        <h:outputLabel style="font-weight:bold" value="#{resources.currentlyEditedText}"/>
                        <profile:albumViewPanel album="#{photosSessionBean.focusedAlbum}"/>

                    </a4j:outputPanel>

                    <rich:separator rendered="#{photosBean.someAllbumEdditing}" height="2px" width="100%"
                                    style="margin-top:10px; margin-bottom:10px;"/>

                </a4j:outputPanel>

                <a4j:outputPanel layout="block" style=" width:100%">
                    <h:panelGrid columns="2">
                        <h:outputLabel value="#{resources.albumsLabel}"/>
                        <a4j:commandLink rendered="#{profile.myProfilePage}" value="Add"
                                         action="#{photosBean.prepareToAddNewAlbum}"
                                         reRender="addNewAlbumPanel"
                                         oncomplete="Richfaces.showModalPanel('addNewAlbumPanel');"
                                         limitToList="true"/>
                    </h:panelGrid>
                </a4j:outputPanel>

                <rich:dataGrid id="personalsAlbumRichTable"
                               columns="1" value="#{photosSessionBean.personalAlbums}"
                               var="album" rowKeyVar="row"
                               onRowMouseOver="this.style.backgroundColor='#F1F1F1'"
                               onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">

                    <profile:albumViewPanel album="#{album}" editWhat="editPanelCurrentlyView"/>
                </rich:dataGrid>


            </a4j:outputPanel>
        </rich:panel>
    </h:form>
    <profile:addNewAlbumPanel oncomplete="setEditView();" id="addNewAlbumPanel"
                              reRender="requestRichPanel, photosProfileTabPanel"/>
    <a4j:jsFunction name="setEditView" action="#{photosBean.viewAlbumPicture}" reRender="photosProfileTabPanel, editPanelCurrentlyView">
        <f:setPropertyActionListener value="editPhotos"
                                     target="#{photosSessionBean.pageViewKey}"/>
    </a4j:jsFunction>
</ui:component>


</html>
